<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../../plugins/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css">
    <link rel="stylesheet" href="../../plugins/bootstrap-3.3.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="../../plugins/select2/css/select2.min.css">
    <script src="../../plugins/jquery.1.12.4.min.js"></script>
    <script src="../../plugins/select2/js/select2.min.js"></script>
    <!--<link rel="stylesheet" href="../../plugins/font-awesome-4.7.0/css/font-awesome.css">-->

</head>
<body>
<div>
    <tr>
        <td align="right">单选标签</td>
        <td>
            <select class="combox" id="sel_recommender" name="recommenderId">
                <option value="">请选择...</option>
                <option value="mingren">锁定</option>
                <option value="mingren">正常</option>
                <!--<optgroup label="小辈儿组">-->
                    <!--<option value="kakaxi">卡卡西</option>-->
                    <!--<option value="mingren">鸣人</option>-->
                    <!--<option value="zuozhu">佐助</option>-->
                    <!--<option value="xiaoying">小樱</option>-->
                <!--</optgroup>-->
                <!--<optgroup label="大辈儿组">-->
                    <!--<option value="bofengshuimen">波风水门</option>-->
                    <!--<option value="dashewan">大蛇丸</option>-->
                    <!--<option value="gangshou">纲手</option>-->
                    <!--<option value="自来也">自来也</option>-->
                <!--</optgroup>-->
            </select>
        </td>
    </tr>
    <hr>
    <tr>
        <td align="right">多选标签</td>
        <td>
            <select class="combox" id="sel_productTag" name="tagId" multiple>
                <optgroup label="小辈儿组">
                    <option value="kakaxi" selected>卡卡西</option>
                    <option value="mingren">鸣人</option>
                    <option value="zuozhu">佐助</option>
                    <option value="xiaoying">小樱</option>
                </optgroup>
                <optgroup label="大辈儿组">
                    <option value="bofengshuimen">波风水门</option>
                    <option value="dashewan">大蛇丸</option>
                    <option value="gangshou">纲手</option>
                    <option value="自来也">自来也</option>
                </optgroup>
            </select>
        </td>
    </tr>
</div>

<div class="radio">
    <div class="radio radio-inline radio-success">
        <input id="status_1" type="radio" name="status" value="1" >
        <label for="status_1">正常 </label>
    </div>
    <div class="radio radio-inline">
        <input id="status_0" type="radio" name="status" value="0" checked>
        <label for="status_0">锁定 </label>
    </div>
    <div class="checkbox checkbox-success">
        <input type="radio" name="radio4" id="radio8" value="option2">
        <label for="radio8">
            Success
        </label>
    </div>
    <div class="checkbox checkbox-danger">
        <input type="radio" name="radio4" id="radio9" value="option3">
        <label for="radio9">
            Danger
        </label>
    </div>
</div>
<script type="text/javascript">
    $(function(){
        function formatState (state) {
            if (!state.id) { return state.text; }
            var $state = $(
                '<span>' + state.text + '</span>'
            );
            return $state;
        };
        $('#sel_recommender').select2({
            placeholder: "请选择",
            templateResult: formatState,
            width:'256px'
        });
        $('#sel_productTag').select2({
            placeholder: "请至少选择一个人名",
            tags:true,
            createTag:function (decorated, params) {
                return null;
            },
            width:'256px'
        });
    });
</script>
</body>
</html>